<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="kfzjw008">
    
    <meta name="description" content="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">
    
    
    
    
    
    
    <title>【WEB】web开发入门实战(2) | 几何军工作室</title>
    <!-- inject:style -->
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <!-- endinject -->
    <style>
        .cube-loading {
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            background: url('/images/lg/loading.gif') no-repeat center center;
            background-color: rgba(0,0,0,.7);
        }

        .cube-loading.out {
            display: none;
        }

        .cube-loading:before {
            display: block;
            content: '加载中';
            position: relative;
            width: 100%;
            top: 50%;
            right: -50%;
            color: #fff;
        }

        @media(max-width: 768px) {
            .cube-loading:before {
                font-size: 1.2em;
                transform: translate(-24px,20px);
                -webkit-transform: translate(-24px,20px);
                -o-transform: translate(-24px,20px);
                -ms-transform: translate(-24px,20px);
            }
        }

        @media(min-width: 768px) {
            .cube-loading:before {

            }
        }
    </style>
    
</head>
<body>
<div class="cube-body">
    <nav id="cube-top-memu" class="cube-menu">
    <ul class="cube-menu-collapse">
        
        <li>
            <i class="cube-icon cube-icon-home" aria-hidden="true"></i>
            <a href="/">首页</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-categories" aria-hidden="true"></i>
            <a href="/categories">分类</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-tags" aria-hidden="true"></i>
            <a href="/project">工程项目</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/competition">学科竞赛</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/zone">原创空间</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-about" aria-hidden="true"></i>
            <a href="/about-me">关于我</a>
        </li>
        
    </ul>
</nav>
<nav class="cube-side-menu" id="cube-side-menu">
    <ul class="cube-menu-list">
        
        <li>
            <a class="lrc-control">开启歌词</a>
        </li>
        
        <li>
            <a class="scroll-to-top">回到顶部</a>
        </li>
    </ul>
</nav>
    <header class="cube-header" id="cube-header">
    <img src=" http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg " alt="头部背景图片">
    
    <div class="cube-type">
        <span class="cube-typed-title">几何军工作室</span>
        <span class="cube-typed-cursor">|</span>
    </div>
    
</header>

    <style>
        nav.cube-menu:before {
            content: '';
            visibility: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 44px;
        
            filter: blur(5px);
            -webkit-filter: blur(5px);
        
            z-index: -1;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-repeat: no-repeat;
            background-position: center -356px;
            background-size: cover;
            background-color: transparent;
        }

        header.cube-background.cube-header-background {
            visibility: hidden;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-position: center -400px;
        }
    </style>
    <header class="cube-background cube-header-background">
        
        <div class="cube-type">
            <span class="cube-typed-title">几何军工作室</span>
            <span class="cube-typed-cursor">|</span>
        </div>
        
    </header>
    <div class="load-header-background"></div>
    <script>
        (function (window) {

            window.headerModule = {}
            window.headerModule.image = {
                width: '2000',
                height: '850'
            }

        })(window)
    </script>
    
    <div class="cube-content">
        <div class="cube-left">
            <div class="cube-article">
    <h1 class="title">【WEB】web开发入门实战(2)</h1>
    
    <div class="cube-article-header">
        <div class="cube-article-date">
            <i class="cube-icon cube-icon-date" aria-hidden="true"></i>
            <!-- moment.js对象 -->
            2018-11-07
            <span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
                   
</span>
        </div>
        <div class="cube-article-tags">
    <i class="cube-icon cube-icon-tag" aria-hidden="true"></i>
    
    <a href="/tags/期末复习/">#期末复习</a>
    
    <a href="/tags/前端/">#前端</a>
    
    <a href="/tags/jQuery/">#jQuery</a>
    
    <a href="/tags/JavaScript/">#JavaScript</a>
    
</div>
    </div>
    
    
    <div class="cube-article-content cube-markdown">
        
        <h1 id="【WEB】web开发入门实战-2"><a href="#【WEB】web开发入门实战-2" class="headerlink" title="【WEB】web开发入门实战(2)"></a>【WEB】web开发入门实战(2)</h1><h2 id="jquery实例"><a href="#jquery实例" class="headerlink" title="jquery实例"></a>jquery实例</h2><h3 id="表单处理实验"><a href="#表单处理实验" class="headerlink" title="表单处理实验"></a>表单处理实验</h3><p>实验原理<br>通过JavaScript框架jQuery实现修改HTML标签属性，完成前端网页的动态显示效果，理解JavaScript语法、动态页面的实现原理、基本设计思想及实现方法。<br><a id="more"></a><br>实验目的<br>理解并掌握基于id、class、name等HTML属性选择器的实现方法<br>理解并掌握控制disabled、checked、hidden等HTML标签元素属性值的方法<br>理解并掌握控制if、for等基本语法的使用<br>理解并掌握HTML基本事件方法<br>理解并掌握jQuery中css选择器，jQuery选择的使用方法<br>理解并掌握jQuery基本事件监听方法<br>理解并掌握Callback回调方法的作用、意义以及<br>理解并掌握定义回调的匿名方法的实现方法<br>理解并掌握基本jQuery基本动画效果的实现方法</p>
<p>实验内容<br>创建Web工程Experiment-04<br>在WebContent目录下，创建resources目录，在resources目录下创建js目录<br>在js目录添加jQuery库文件jquery-3.3.1.min.js<br>在WebContent目录下，创建index.html文件，并直接复制如下代码<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Insert title here<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">id</span>=<span class="string">"legal"</span>&gt;</span>我已阅读相关说明并遵守相关法律<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"register"</span>&gt;</span></span><br><span class="line">      用户名:</span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"username"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"ul_address"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      地址：</span><br><span class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"address"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">id</span>=<span class="string">"button_address"</span>&gt;</span>添加地址<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">br</span>&gt;</span> 未来意向</span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"purpose"</span>&gt;</span>Java工程师<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"purpose"</span>&gt;</span>测试工程师<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"purpose"</span>&gt;</span>前端工程师<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">br</span>&gt;</span> 请从以下课程中选择2项最喜欢的课程</span><br><span class="line">      <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"courses"</span>&gt;</span>Web开发技术<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"courses"</span>&gt;</span>软件项目管理<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"courses"</span>&gt;</span>数据库原理<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">name</span>=<span class="string">"courses"</span>&gt;</span>系统分析与设计<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span>&gt;</span>提交<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>需求+1<br>必须同意协议，方可填写注册表单<br>用户名必须大于6位，否则弹出警告框<br>输入地址后，点击添加地址按钮，将输入信息动态添加至列表<br>未来意向，支持取消选中的单选框<br>喜欢的课程，能且仅能选择2项<br>当用户名小于6字符，喜欢的课程小于2项时，不可提交表单</p>
<p>js代码：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> re = $(<span class="string">"#register input"</span>).prop(<span class="string">"disabled"</span>,<span class="literal">true</span>);</span><br><span class="line">    <span class="keyword">let</span> syb = $(<span class="string">"button:submit"</span>).prop(<span class="string">"disabled"</span>,<span class="literal">true</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">let</span> asd=<span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">let</span> que =<span class="literal">false</span>;</span><br><span class="line">    </span><br><span class="line">    $(<span class="string">"#legal"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    	<span class="keyword">if</span>($(<span class="keyword">this</span>).prop(<span class="string">"checked"</span>))&#123;</span><br><span class="line">    		re.prop(<span class="string">"disabled"</span>,<span class="literal">false</span>);</span><br><span class="line">    	&#125;</span><br><span class="line">    	<span class="keyword">else</span></span><br><span class="line">    		&#123;</span><br><span class="line">    		re.prop(<span class="string">"disabled"</span>,<span class="literal">true</span>);</span><br><span class="line">    		&#125;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    $(<span class="string">"input[name=username]"</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    	<span class="keyword">if</span>($(<span class="keyword">this</span>).val().trim().length&lt;=<span class="number">6</span>)&#123;</span><br><span class="line">    		alert(<span class="string">"MDZZ!!!!!"</span>);</span><br><span class="line">    		asd=<span class="literal">false</span>;</span><br><span class="line">    	&#125;</span><br><span class="line">    	<span class="keyword">else</span>&#123;</span><br><span class="line">    		asd=<span class="literal">true</span>;</span><br><span class="line">    	&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">$(<span class="string">"#button_address"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">let</span> ad=$(<span class="string">"input[name=address]"</span>);</span><br><span class="line">	<span class="keyword">let</span> bf=$(<span class="string">"&lt;li&gt;"</span>+ad.val()+<span class="string">"&lt;/li&gt;"</span>);</span><br><span class="line">	<span class="comment">//ad.val("");</span></span><br><span class="line">	bf.css(<span class="string">"display"</span>,<span class="string">"none"</span>);</span><br><span class="line">	$(<span class="string">"#ul_address"</span>).append(bf);</span><br><span class="line">	bf.fadeIn(<span class="number">1000</span>);</span><br><span class="line">&#125;);</span><br><span class="line">   </span><br><span class="line"> $(<span class="string">"input[name=purpose]"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    	</span><br><span class="line">    	<span class="keyword">let</span> sec=$(<span class="keyword">this</span>).prop(<span class="string">"dt"</span>);</span><br><span class="line">    	<span class="keyword">if</span>(sec)&#123;</span><br><span class="line">    		$(<span class="keyword">this</span>).prop(<span class="string">"checked"</span>,<span class="literal">false</span>);</span><br><span class="line">    		$(<span class="keyword">this</span>).prop(<span class="string">"dt"</span>,<span class="literal">false</span>);</span><br><span class="line">    	&#125;</span><br><span class="line">    	<span class="keyword">else</span>&#123;</span><br><span class="line">    		$(<span class="keyword">this</span>).prop(<span class="string">"dt"</span>,<span class="literal">true</span>);</span><br><span class="line">    		$(<span class="string">"input[name=purpose]:not(:checked)"</span>).prop(<span class="string">"dt"</span>,<span class="literal">false</span>);</span><br><span class="line">    	&#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">let</span> amount=<span class="number">2</span>;</span><br><span class="line"> $(<span class="string">"input[name=courses]"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	 <span class="keyword">let</span> checked=$(<span class="string">"input[name=courses]:checked"</span>);</span><br><span class="line">	 <span class="keyword">let</span> unc=$(<span class="string">"input[name=courses]"</span>).not(<span class="string">":checked"</span>);</span><br><span class="line">	 <span class="keyword">if</span>(checked.length&gt;=amount)&#123;</span><br><span class="line">		 unc.prop(<span class="string">"disabled"</span>,<span class="literal">true</span>);</span><br><span class="line">		 que=<span class="literal">true</span>;</span><br><span class="line">		 </span><br><span class="line">	 &#125;</span><br><span class="line">	 <span class="keyword">else</span> &#123;</span><br><span class="line">		 </span><br><span class="line">		 unc.prop(<span class="string">"disabled"</span>,<span class="literal">false</span>);</span><br><span class="line">		 que=<span class="literal">false</span>;</span><br><span class="line">	 &#125;</span><br><span class="line">	 </span><br><span class="line">	 </span><br><span class="line"> &#125;);</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> $(<span class="string">"input[name=username],input[name=courses]"</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	 <span class="keyword">if</span>(asd&amp;&amp;que)&#123;</span><br><span class="line">		 $(<span class="string">"button:submit"</span>).prop(<span class="string">"disabled"</span>,<span class="literal">false</span>);</span><br><span class="line">	 &#125;</span><br><span class="line">	 <span class="keyword">else</span>&#123;</span><br><span class="line">		 </span><br><span class="line">		 $(<span class="string">"button:submit"</span>).prop(<span class="string">"disabled"</span>,<span class="literal">true</span>);</span><br><span class="line">	 &#125;</span><br><span class="line"> &#125;)</span><br><span class="line"></span><br><span class="line">    </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<h3 id="8-2-边侧栏2级菜单滑动实例"><a href="#8-2-边侧栏2级菜单滑动实例" class="headerlink" title="8.2    边侧栏2级菜单滑动实例"></a>8.2    边侧栏2级菜单滑动实例</h3><p>在WebContent目录下，创建sidebar.html文件，复制代码<br>默认，二级菜单不显示</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Insert title here<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="css">    <span class="comment">/*  ------------左边侧栏--------------  */</span></span></span><br><span class="line"><span class="undefined">    aside &#123;</span></span><br><span class="line"><span class="undefined">      padding: 5px;</span></span><br><span class="line"><span class="undefined">      display: inline-block;</span></span><br><span class="line"><span class="undefined">      vertical-align: top;</span></span><br><span class="line"><span class="undefined">      width: 230px;</span></span><br><span class="line"><span class="undefined">      border: 1px solid red;</span></span><br><span class="line"><span class="undefined">      margin: 5px 10px;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 一二级ul样式 */</span></span></span><br><span class="line"><span class="undefined">    aside ul &#123;</span></span><br><span class="line"><span class="undefined">      list-style-type: none;</span></span><br><span class="line"><span class="undefined">      margin: 0;</span></span><br><span class="line"><span class="undefined">      padding: 0;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">background-color</span>: <span class="selector-id">#f1f1f1</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 一二级超链接导航样式 */</span></span></span><br><span class="line"><span class="undefined">    aside a &#123;</span></span><br><span class="line"><span class="undefined">      display: block;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span>: <span class="selector-id">#000</span>;</span></span><br><span class="line"><span class="undefined">      padding: 8px 16px;</span></span><br><span class="line"><span class="undefined">      text-decoration: none;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 一级标题 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">li</span><span class="selector-class">.submenu</span>&gt;<span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">background-color</span>: <span class="selector-id">#333</span>;</span></span><br><span class="line"><span class="undefined">      font-weight: bold;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">color</span>: <span class="selector-id">#1d835a</span>;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">aside</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="undefined">      font-weight: bold;</span></span><br><span class="line"><span class="css">      <span class="selector-tag">background-color</span>: <span class="selector-id">#555</span>;</span></span><br><span class="line"><span class="undefined">      color: white;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 二级菜单，默认不显现 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">ul</span><span class="selector-class">.submenu-dropdown</span> &#123;</span></span><br><span class="line"><span class="undefined">      display: none;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"submenu"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>云技术管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"submenu-dropdown"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>云服务器<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>云数据库<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>负载均衡<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"submenu"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>安全管理<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"submenu-dropdown"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>云盾控制台<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>DDoS高防IP<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>Web应用防火墙<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span>CA证书服务<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"resources/js/jquery-3.3.1.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>通过jquery子选择器获取一级标题对应的二级菜单，点击1级标题滑出对应的二级列表，并收缩其他展开二级列表<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	</span><br><span class="line">	$(<span class="string">"li.submenu"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">let</span> drop=$(<span class="keyword">this</span>).children(<span class="string">"ul.submenu-dropdown"</span>);</span><br><span class="line">		drop.slideToggle();</span><br><span class="line">		$(<span class="string">"ul.submenu-dropdown"</span>).not(drop).slideUp();</span><br><span class="line">		</span><br><span class="line">	&#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<p>以上实例内容来自课程实验指导书，实现代码为个人编写。</p>

    </div>
</div>

<div class="cube-article-nav">
    <ul>
        
        <li class="prev">
            <a href="/2018/11/07/2020/">
                <i class="cube-icon cube-prev" aria-hidden="true"></i>
                【WEB】web开发入门实战(2)
            </a>
        </li>
        
        
        <li class="next">
            <a href="/2018/11/07/2018/">
                【WEB】web开发入门实战(1)
                <i class="cube-icon cube-next" aria-hidden="true"></i>
            </a>
        </li>
        
    </ul>
</div>


<!-- TODO 根据theme.comment的内容进行入口选择 -->


<!-- Table of Contents -->

        </div>
        <div class="cube-right">
            

<div class="cube-search cube-sidebar" id="cube-search">
    <div class="search-container">
        <input type="text" placeholder="搜索" class="cube-search-input" id="cube-search-input">
        <i class="cube-icon cube-icon-search cube-search-submit" aria-hidden="true"></i>
    </div>
    <!-- TODO 通过给window赋一个全局变量，通过脚本赋值 -->
</div>
<script>
    (function (window) {
        'use strict';
        window.searchModule = {}
        window.searchModule.JSONUrl = '/content.json'
        window.searchModule.rootUrl = '/'
    })(window)
</script>
<div class="cube-search-form">
    <div class="cube-search-control">
        <input type="text" placeholder="搜索" class="search-input">
        <a class="close-button">
            <i class="cube-icon cube-close" aria-hidden="true"></i>
        </a>
    </div>
    <div class="cube-search-result"></div>
</div>


<div class="cube-author cube-sidebar" id="cube-author">
    
    
    <span>kfzjw008</span>
    
    
    <a title="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备</a>
    
    <div class="count">
        <a class="count articles"><span>25</span>文章</a>
        <a class="count tags"><span>22</span>标签</a>
        <a class="count categories"><span>7</span>分类</a>
    </div>
</div>



<div class="cube-music cube-sidebar" id="cube-music">
    <div class="cube-player aplayer" id="cube-player"></div>
</div>
<script>
    (function (window) {
        window.musicModule = {}
        window.musicModule.musicConfig = '{"narrow":false,"autoplay":true,"showlrc":3,"theme":"#b7daff","mutex":true,"mode":"circulation","preload":"auto","listmaxheight":"513px","music":[{"title":"光明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%85%89%e6%98%8e-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"不羁的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%b8%8d%e7%be%81%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"上千个黎明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0-%e4%b8%8a%e5%8d%83%e4%b8%aa%e9%bb%8e%e6%98%8e.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"信仰在空中飘扬","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%bf%a1%e4%bb%b0%e5%9c%a8%e7%a9%ba%e4%b8%ad%e9%a3%98%e6%89%ac-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"像梦一样自由","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%83%8f%e6%a2%a6%e4%b8%80%e6%a0%b7%e8%87%aa%e7%94%b1-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"怒放的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%80%92%e6%94%be%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"大桥上","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0%20-%20%e5%a4%a7%e6%a1%a5%e4%b8%8a.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"流年啊，你奈我何","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b5%81%e5%b9%b4%e5%95%8a%20%e4%bd%a0%e5%a5%88%e6%88%91%e4%bd%95-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"生来彷徨","author":"汪峰","url":"http://47.95.213.193/mp3data/%e7%94%9f%e6%9d%a5%e5%bd%b7%e5%be%a8-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"}]}'
        window.musicModule.lrcConfig = {
            open: '开启歌词',
            close: '关闭歌词'
        }
    })(window)
</script>



<div class="cube-recent-posts cube-sidebar" id="cube-recent-posts">
    <div class="title">
        <a>近期文章</a>
    </div>
    <ul class="list">
        
        
        <li>
            <!-- TODO 如果文章要显示图片，那么在front-matter上添加preview属性(url or path) -->
            
            <div class="normal">
                <p class="index first">
                    <span>1</span>
                </p>
                <p class="title">
                    <a href="/2019/03/27/2038/" title="JAVA学习笔记(2)-spring MVC">JAVA学习笔记(2)-spring MVC</a>
                </p>
            </div>
            
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>2</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2036/" title="JAVA学习笔记">JAVA学习笔记</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>3</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2037/" title="设计模式学习笔记-01">设计模式学习笔记-01</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>4</span>
                </p>
                <p class="title">
                    <a href="/2019/03/23/2035/" title="蓝桥杯比赛前夜-知识总结">蓝桥杯比赛前夜-知识总结</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>5</span>
                </p>
                <p class="title">
                    <a href="/2019/03/21/2034/" title="建立友好合作博客的方式">建立友好合作博客的方式</a>
                </p>
            </div>
        </li>
        
        
    </ul>
</div>



<div class="cube-categories cube-sidebar" id="cube-categories">
    <div class="title">
        <a href="/categories">分类</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/categories/WEB开发/">#WEB开发</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/博客公告/">#博客公告</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/categories/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/JAVA/">#JAVA</a>
        </div>
        
    </div>
</div>



<div class="cube-tagcloud cube-sidebar" id="cube-tagcloud">
    <div class="title">
        <a href="/tags">标签云</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box-bg ">
            <a href="/tags/servlet/">#servlet</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/期末复习/">#期末复习</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/HTML/">#HTML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/CSS/">#CSS</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/前端/">#前端</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/算法/">#算法</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/随笔/">#随笔</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/jQuery/">#jQuery</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JavaScript/">#JavaScript</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/WEB-Service/">#WEB Service</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/题解/">#题解</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/MYSQL/">#MYSQL</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/BLOG/">#BLOG</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HEXO/">#HEXO</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JAVA/">#JAVA</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/UML/">#UML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/软件体系结构/">#软件体系结构</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/Spring-MVC/">#Spring MVC</a>
        </div>
        
    </div>
</div>



<div class="cube-links cube-sidebar" id="cube-links">
    <div class="title">
        <a>个人链接</a>
    </div>
    <ul class="list">
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/GitHub.png">
            
            <a href="https://github.com/kfzjw008" target="_blank">我的GitHub</a>
        </li>
        
        <li>
            
            
            <img src="https://www.csdn.net/company/img/csdn-logo.svg">
            
            <a href="https://blog.csdn.net/kfzjw008" target="_blank">我的CSDN</a>
        </li>
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/SF.png">
            
            <a href="https://47.95.213.193" target="_blank">我的个人主页</a>
        </li>
        
        <li>
            
            
            <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=fc01334b798b4710ce2ffacafbf5a4c0/1b4c510fd9f9d72a26f9db77df2a2834349bbb3f.jpg">
            
            <a href="https://www.zhihu.com/people/zhang-jun-wei-81-7/activities" target="_blank">我的知乎主页</a>
        </li>
        
    </ul>
</div>



<div class="cube-friend-links cube-sidebar" id="cube-friend-links">
    <div class="title">
        <a>友情链接</a>
    </div>
    <ul class="list">
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="http://cube-1252774894.cosgz.myqcloud.com/friend_links/micblo.png">
            <a href="https://github.com/MajorBill-Liu" target="_blank">MajorBill-Liu 的github</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
    </ul>
</div>


        </div>
    </div>
</div>
<footer class="cube-footer">
    
© 2017 kfzjw008

<br>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>


</footer>
<!-- inject:script -->
<script src="/js/script.js"></script>
<!-- endinject -->
<div class="cube-loading out"></div>
</body>
</html>